<template>
    <!-- 聊天 -->
    <div class="class-mg">
        <!-- {{ studentList }} -->
        <div class="frame">
            <!-- 左侧联系人栏目 -->
            <div class="frame-left">

                <div class="dayi-list">答疑列表</div>
                <div class="dayi-student">

                    <div @click="onChat(item, index)" v-for="(item, index) in studentList" :key="index"
                        class="item-student" :class="{ 'skip-style': index === xz, 'status-style': item.status === 0 }">
                        <div style="display: flex;">
                            <img :src="item.profilePic" class="tx-img">
                            <div class="list-info">
                                <span>{{ item.nickName }}</span>
                                <span>({{ item.className }})</span>
                            </div>
                        </div>
                        <!-- stop 阻止冒泡事件 -->
                        <img @click.stop="onDelete(item)" src="/src/assets/svg/delete3.svg"
                            class="img-delete">
                    </div>
                </div>
            </div>

            <!-- 右侧 -->
            <div class="frame-right">
                <chat v-if="studentList != []" @click-event="hangOn"  :idData="IdData"></chat>
            </div>
        </div>

    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
//发件人是自己就是true
import useUserStore from '@/stores/useUserStore';
import Chat from '@/components/Chat.vue';
import teacherHttp from '@/api/teacherHttp';
import { openInfo } from '@/utils/openInfo';
const userStore = useUserStore()

const IdData = ref({
    userId: userStore.userInfo.userId,
    toUserId: null,
})
const xz = ref(null)

const studentList = ref([])


const onChat = (item, index) => {
    xz.value = index
    //改变传送到子组件的ID的数据
    IdData.value.toUserId = item.studentId
    //选中了 就把状态改为已读
    //console.log("老师答疑(父组件)选中对象", item);
}

onMounted(() => {
    //初始化学生列表
    getStudentChat()
})

//获取有问题的学生列表
function getStudentChat() {
    console.log("方法调用了",userStore.userInfo.userId);
    
    teacherHttp.getStudentChat(userStore.userInfo.userId).then((res) => {
        if (res.code == 200) {
            //console.log("获取答疑列表", res);
            studentList.value = res.data
            console.log("最新的数据",studentList.value);   
        }
    })
}

function hangOn(){
    setTimeout(()=>{
        getStudentChat()
    },300)
}

//删除信息
const onDelete = (aObj) => {
    //如果已经回复对话
    if (aObj.status == 1) {
        teacherHttp.deleteSession(aObj.sessionId).then((res)=>{
            if (res.code == 200) {
                // 移除会话成功 重新获取数据
                getStudentChat()
                IdData.value={
    userId: userStore.userInfo.userId,
    toUserId: null,
}
            }
        })
    }else{
        openInfo("未回复答疑，不可移除会话！","warning")
    }
}

</script>

<style scoped>
/* 最大的盒子 */
.class-mg {
    background-color: rgb(182, 174, 174, 0.1);
    display: flex;
    justify-content: center;
    height: 900px;
    border-radius: 10px;
}

.frame {
    display: flex;
    width: 100%;
    border-radius: 10px;

}



.frame-left {
    min-width: 300px;
    flex: 2;

}

.frame-right {
    flex: 7;
    margin: 10px;
    min-width: 600px;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 10px;
}

.dayi-list {
    border-radius: 10px;
    background-color: rgb(244, 235, 235);
    margin-top: 10px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    user-select: none;
}

.item-student {
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    padding: 8px 5px 8px 8px;
    margin: 10px;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

}

.tx-img {
    border-radius: 5px;
    width: 50px;
}

.list-info {
    margin-left: 8px;
    display: flex;
    flex-direction: column;
}

.skip-style {
    border: 2px rgb(25, 219, 225) solid;
}

.item-student:hover {
    background-color: rgb(184, 184, 184, 0.5);
}

.dayi-student {
    border-left: 2px rgb(246, 220, 220) solid;
    border-right: 2px rgb(246, 220, 220) solid;
    border-radius: 10px;
    max-height: 800px;
    overflow: auto;
}

.content {
    flex: 8;
    background-color: rgb(255, 255, 255);
    padding: 10px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;

}

.img-delete {
    width: 28px;
}

.img-delete:hover {
    transform: scale(1.2);
}

.status-style {
    z-index: 1000;
    background-color: rgb(250, 236, 236);
}
</style>